<template>
    <div class="photo-list-box">
        <div class="photo-box"
            v-for="item in props.photoList" 
            :key="item.id"
            @click="showDetail(item)"
        >
            <div class="photo-title">标题：<span>{{item.title}}</span></div>
            <div class="photo-img">
                <img :src="item.imgUrl" alt="图片">
            </div>
            <div class="photo-decript text-ellipsis">
                描述：{{item.decript}}
            </div>
        </div>
    </div>
    <el-dialog 
        custom-class="dialog-box"
        class="dialog-box"
        :top="'2vh'" 
        v-model="dialogVisible" 
        draggable>
        <template #header>
            <div class="dialog-title">{{currentContent.data.title}}</div>
        </template>
        <div class="dialog-content-box">
            <div class="page-img-box">
                <img :src="currentContent.data.imgUrl" alt="图片">
            </div>
            <div class="page-content">
                {{currentContent.data.decript}}
            </div>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>    
    import {reactive, ref} from 'vue'

    interface photoInfo {
        id: string,
        title: string,
        imgUrl: string,
        decript: string
    }

    const props = defineProps<{
        photoList: photoInfo[]
    }>()

    const dialogVisible = ref(false)
    //reactive 响应式只针对里面的单个属性
    let currentContent = reactive(
        {  //reactive 重新赋值，页面不会响应式更新，需要再套一层 
            data:{
                id: '1',
                title: '默认标题',
                imgUrl: '',
                decript: ''
            }
        }
    )
    const showDetail = (current:photoInfo)=>{
        // console.log('当前文章', current)
        dialogVisible.value = true
        currentContent.data = current
        // console.log('当前文章currentContent', currentContent)
    }
</script>
<style lang="scss">
    .dialog-box{
        margin-bottom: 0;
        .el-dialog__body{
            padding: 0 !important;
        }
        .el-dialog__header{
            padding: 0;
            height: 56px;
            text-align: center;
            background: #cc07;
            margin-right: 0;
        }
        .el-dialog__headerbtn{
            top: 0;
        }
    }
</style>
<style lang="scss" scoped>
    .photo-list-box{
        display: flex;
        padding-top: 10px;
        .photo-box{
            margin-right: 10px;
            width: 200px;
            height: 300px;
            // border: 1px solid #ccc;
            background: #b37858;
            // border-radius: 4px;
            // width: 260px;
            border-radius: 10px;
            background: #ECEEF9;
            color: #12141c;
            -webkit-transition: all ease 300ms;
            -o-transition: all ease 300ms;
            transition: all ease 300ms;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 0 6px;
            cursor: pointer;
            &:hover {
                -webkit-box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1), 
                                    0 16px 24px 2px rgba(0, 0, 0, 0.05);
                box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1),
                            0 16px 24px 2px rgba(0, 0, 0, 0.05);
                -webkit-transform: translateY(-10px);
                -ms-transform: translateY(-10px);
                transform: translateY(-10px);
            }
            .photo-title{
                height: 36px;
                display: flex;
                align-items: center;
                
            }
            .photo-img{
                flex: 1;
                padding-bottom: 6px;
                img{
                    width: 100%;
                    height: 100%;
                    background-size: 100%;
                }
            }
            .photo-decript{
                // padding-bottom: 16px;
                height: 108px;                
            }
        }
    }
    .text-ellipsis{
        overflow:hidden; 
        text-overflow:ellipsis;
        display:-webkit-box;    //将对象作为弹性伸缩盒子模型显示。
        -webkit-box-orient:vertical;  // 从上到下垂直排列子元素
        -webkit-line-clamp:5;        
        /* 在vue中，直接写成这样是无效的，-webkit-box-orient: vertical;   */
        /* autoprefixer: off */  
        -webkit-box-orient: vertical;  
        /* autoprefixer: on */  
    }
    .dialog-title{
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .dialog-content-box{
        height: calc( 96vh - 56px );
        overflow-y: auto;
    }   
    .page-img-box{
        width: 100%;
        height: 400px;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            // background-size: 100%;
        }
    }
    .page-content{
        padding: 10px;
        text-indent: 2em;
        font-size: 18px;
    }
</style>